<template>

  <div class="dndList">
    <div style="height: 40px;position: relative">
      <el-row>
        <el-col :span="12">
          <div class="clearfix">
            <span>
          <el-button icon="el-icon-arrow-left" @click="back">
          返回
          </el-button>
        </span>
            <span style="padding-left: 20px">【站点：{{info.name}}】编辑功能组合</span>
          </div>
        </el-col>
        <el-col :span="12">
          <el-button style="position: absolute;right: 100px;" @click="dialogFeatureVisible = true" type="primary" plain>功能选择</el-button>
          <el-button style="position: absolute;right: 0px;" @click="clickSave" type="primary">保存</el-button>
        </el-col>
      </el-row>

    </div>

    <div :style="{width:width1}" class="dndList-list">
      <draggable :set-data="setData" :list="siteFeatureList" group="feature" class="dragArea">
        <div v-for="(element, index) in siteFeatureList" :key="index" class="list-complete-item" @click="clickFeatureOne(index)">
          <div ref="functionImage" class="list-complete-item-handle">
            <el-image :src="element.cover" :title="element.name" :style="'width:' + imageWidth"></el-image>
          </div>
          <div style="position:absolute;right:5px;bottom: 5px">
            <span style="float: right ;margin-right:5px;" @click="deleteEle(element, index)">
              <i style="color:#333;font-size: 30px" class="el-icon-delete" />
            </span>
          </div>
        </div>
      </draggable>
    </div>
    <el-dialog width="80%" title="功能列表" :visible.sync="dialogFeatureVisible">
      <FeatureDialog @clickSelectFeature="clickSelectFeature" />
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import FeatureDialog from '../../feature/components/FeatureDialog'
import { getList, save } from '@/api/site-feature'
export default {
  name: 'FunctionDrag',
  components: { draggable, FeatureDialog },
  props: {
    width1: {
      type: String,
      default: '100%'
    },
    info: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      imageWidth: '100%',
      dialogFeatureVisible: false,
      siteId: '',
      siteFeatureList: []
    }
  },
  created() {
    this.siteId = this.$route.params && this.$route.params.id
    console.log(this.siteId, 'this.siteId')
    this.getSiteFeatureList()
  },
  methods: {
    deleteEle(ele, index) {
      this.siteFeatureList.splice(index, 1)
    },
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData('Text', '')
    },
    clickFeatureOne(index) {
      console.log(index, 'index----')
    },
    clickSave() {
      if (!this.siteFeatureList.length) {
        this.$notify({
          title: '警告',
          message: '内容不能为空！',
          type: 'warning'
        })
        return
      }
      const featureIds = this.getElementsByKey(this.siteFeatureList, 'id')
      console.log(featureIds, 'featureIds')

      save({
        site_id: this.siteId,
        feature_ids: featureIds
      }).then(res => {
        this.$notify({
          message: res.message,
          type: 'success',
          duration: 1 * 1000
        })
        this.back()
      })
    },
    clickSelectFeature({ select }) {
      const mergedArray = this.siteFeatureList.concat(select)
      this.siteFeatureList = mergedArray
      this.dialogFeatureVisible = false
    },
    getElementsByKey(arr, key) {
      return arr.map((subArr) => subArr[key])
    },
    getSiteFeatureList() {
      getList({ site_id: this.siteId, per_page: 100 }).then(res => {
        this.siteFeatureList = res.data.data
      })
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
  .dndList {
    background: #fff;
    padding-bottom: 40px;
    &:after {
      content: "";
      display: table;
      clear: both;
    }
    .dndList-list {
      float: left;
      padding-bottom: 30px;
      border:1px solid #ccc;
      &:first-of-type {
        margin-right: 2%;
      }
      .dragArea {
        margin-top: 15px;
        min-height: 50px;
        padding-bottom: 30px;
      }
    }
  }

  .list-complete-item {
    cursor: pointer;
    position: relative;
    font-size: 14px;
    padding: 5px 12px;
    margin-top: 0px;
    border: 1px dashed #bfcbd9;
    transition: all 0.3s;
    min-height: 100px;
  }
  .list-complete-item:hover{
    border: 2px dashed #333;
  }

  .list-complete-item-handle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0px;
    width: 100%;
  }

  .list-complete-item-handle2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 20px;
  }

  .list-complete-item.sortable-chosen {
    background: #eee;
  }

  .list-complete-item.sortable-ghost {
    background: #666;
  }

  .list-complete-enter,
  .list-complete-leave-active {
    opacity: 0;
  }
</style>
